<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
var allli = navRoot.getElementsByTagName("li")
for (i=0; i<allli.length; i++) {
node = allli[i];
node.onmouseover=function() {
this.className+=" current";
}
node.onmouseout=function() {
this.className=this.className.replace(" current", "");
}
}
}
}
window.onload=startList;
//--><!]]></script>
<style type="text/css">
body {
  font-family: Verdana;
  font-size: 12px;
  line-height: 1.5;
}
img {
  border-style: none;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #F00;
}
p {
  font-size: 14px;
}
#menu {
  width: 100px;
  border: 1px solid #CCC;
  border-bottom: none;
}
#menu ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#menu ul li {
  background: #eee;
  padding: 0px 8px;
  height: 26px;
  line-height: 26px;
  border-bottom: 1px solid #CCC;
  position: relative;
}
#menu ul li ul {
  display: none;
  position: absolute;
  left: 100px;
  top: 0px;
  width: 100px;
  border: 1px solid #ccc;
  border-bottom: none;
}
#menu ul li.current ul {
  display: block;
}
#menu ul li:hover ul {
  display: block;
}
</style>
</head>
<body>
<div id="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">网页版式布局</a>
      <ul>
        <li><a href="#">自适应宽度</a></li>
        <li><a href="#">固定宽度</a></li>
      </ul>
    </li>
    <li><a href="#">div+css教程</a>
      <ul>
        <li><a href="#">新手入门</a></li>
        <li><a href="#">视频教程</a></li>
        <li><a href="#">常见问题</a></li>
      </ul>
    </li>
    <li><a href="#">div+css实例</a></li>
    <li><a href="#">常用代码</a></li>
    <li><a href="#">站长杂谈</a></li>
    <li><a href="#">技术文档</a></li>
    <li><a href="#">资源下载</a></li>
    <li><a href="#">图片素材</a></li>
  </ul>
  </div>
  <table border=0 cellspacing=0 cellpadding=0>

	<tbody><tr>

		<td width=20>&nbsp;</td>

		<td width="100" style="text-align: center;background-color: #999999;">Lorem</td>

		<td width="20">&nbsp;</td>

		<td style="text-align: center;" width="100"><a href="#">Ipsum</a></td>

		<td width="20">&nbsp;</td>

		<td style="text-align: center;" width="100"><a href="#">Dolar</a></td>

		<td width="20">&nbsp;</td>

		<td style="text-align: center;" width="100"><a href="#">Amit</a></td>

		<td width="20">&nbsp;</td>

	</tr>

	<tr>

		<td height="1" colspan="10" style="background-color: #cccccc;"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="1"> </td></tr></table></td>

	</tr></tbody>

</table>

  

</body>
</html>